import React from 'react'
import './App.css';
import MyEcharts from './components/my-echarts';

function getRandomData () {
  return [
    {
      day: 'mon',
      value: Math.random() * 100,
    },
    {
      day: 'mon',
      value: Math.random() * 100,
    },
    {
      day: 'mon',
      value: Math.random() * 100,
    },
    {
      day: 'mon',
      value: Math.random() * 100,
    },
  ];
}

class App extends React.Component {

  state = {
    data: getRandomData(),
  }

  componentDidMount () {
    setInterval(() => {
      this.setState({
        data: getRandomData(),
      });
    }, 1000);
    // setTimeout(() => {
    //   this.setState(getRandomData());

    //   setTimeout(() => {
    //     this.setState(getRandomData());
    //   }, 1000);
    // }, 1000);
  }

  render () {
    const option = {
      xAxis: {
        type: 'category',
        data: this.state.data.map(d => d.day),
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: this.state.data.map(d => d.value),
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }
      ],
    };

    return (
      <div id="app">
        <MyEcharts option={ option } />
      </div>
    );
  }

}

export default App
